<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>装备制作管理</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
    <script type="text/javascript" src="../../js/jquery-3.4.1.js"></script>
</head>
<body>
<!--流式布局-->
<div class="layui-fluid">
    <div class="layui-card">
        <!-- head: 数据表格搜索 -->
        <div class="layui-card-header">
            <div class="layui-form">
                <!-- 搜索条件input -->
                <!-- 搜索按钮，已经使用表格的toolbar -->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <select class="layui-select" name="search-name-val" lay-search></select>
                    </div>
                </div>
            </div>
        </div>
        <!-- body: 数据表格（工具条、表格内容） -->
        <!-- 表格头工具按钮组-->
        <div id="LAY-table-bar" class="layui-btn-group layui-hide">
            <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" lay-event="add">
                <i class="layui-icon">&#xe642;添加</i>
            </button>
            <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" lay-submit lay-event="search">
                <i class="layui-icon">&#xe615;查询</i>
            </button>
        </div>
        <div class="layui-card-body">
            <table id="LAY-table" class="layui-table layui-inline" lay-filter="LAY-table"></table>
        </div>
        <!-- other: 表格行数据按钮组-->
        <div id="LAY-table-row-bar" class="layui-btn-group layui-hide">
            <button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-normal" lay-event="edit">
                <i class="layui-icon">&#xe642;编辑</i>
            </button>
            <button type="button" class="layui-btn layui-btn-xs layui-btn-radius" lay-event="done">
                <i class="layui-icon">&#xe63c;详情</i>
            </button>
        </div>
    </div>
</div>

<script type="text/javascript" src="../../layuiadmin/layui/layui.all.js"></script>
<script type="text/javascript" src="../../layuiadmin/default.js"></script>
<script type="text/javascript" src="../../js/utils.js"></script>
<script>

    // layui
    layui.use(['table', 'form', 'util'], function () {
        // do something ...
        let form = layui.form,
            table = layui.table,
            util = layui.util;
        // form.render("select");

        /*静态变量*/
        const pre = '/equipment', goods = '/goods'

        const server = {
                list: pre + '/list',
                add: pre + '/add',
                update: pre + '/update',
                listGoods: goods + '/listByCondition',
            }, htmlDiv = 'equipment-div.html',
            eqmDiv = 'equipment-needs-list.html';
        ;

        /**
         * tableIns: 表格返回值
         * winIndex: 弹出层索引
         */
        let tableIns, winIndex;

        /*-----------[table]-----------*/
        tableIns = table.render({
            elem: '#LAY-table',
            url: server.list,
            autoSort: false,
            cols: [     [
                {field: 'id', title: 'ID', hide: true},
                {field: 'equipmentName', title: '装备名称'},
                {field: 'cost', title: '制作材料总费用'},
                {field: 'price', title: '当前交易所价格'},
                {field: 'historyMaxPrice', title: '历史最高价格'},
                {field: 'historyMinPrice', title: '历史最低价格'},
                {
                    field: 'needs', title: '需要数量', templet: function (d) {
                        let html = '<div class="layui-btn layui-btn-xs" lay-event="needs">' + d.needs + '</div>'
                        return html;
                    }
                },
                {
                    field: 'reminding', title: '剩余数量', templet: function (d) {
                        let html = '<div class="layui-btn layui-btn-xs" lay-event="reminding">' + d.reminding + '</div>'
                        return html;
                    }
                },
                {field: 'finishStatus', title: '状态'},
                {width: 200, align: 'center', title: '操作', toolbar: '#LAY-table-row-bar'}
            ]]
        });

        // 表格头工具栏监听
        table.on('toolbar(LAY-table)', function (obj) {
            switch (obj.event) {
                case 'add':
                    win.open('新增', htmlDiv);
                    break;
                case 'search':
                    tableIns.reload({
                        where: {
                            data: {
                                equipName: $('[name=search-name-val]').val() == '' ? null : $('[name=search-name-val]').val()
                            }
                        }
                    });
                    break;
                default:
                    break;
            }
        });

        // 搜索
        // 商品列表 - 一次性把所有商品查询出来
        $.post(server.listGoods, JSON.stringify({'type': 0}), function (res) {
            $('[name="search-name-val"]').empty();
            $('[name="search-name-val"]').append(new Option("商品", ""));
            $.each(res.data, function (index, item) {
                $('[name="search-name-val"]').append(new Option(item.name, item.name));
            });

            form.render("select");
        });

        //  行工具监听
        table.on('tool(LAY-table)', function (obj) {
            let cont = eqmDiv + '?eqmId=' + obj.data.id + '&type=';
            switch (obj.event) {
                case 'edit':
                    win.open('编辑', htmlDiv, obj.data.id);
                    break;
                case 'del':
                    layer.confirm('确认删除吗?', {icon: 2, title: '删除'}, function (index) {
                        $.get(server.del + '/' + obj.data.id, function (res) {
                            if (res.code !== 0) {
                                layer.msg('操作出错:[' + data.message + ']', {icon: 5});
                            } else {
                                layer.msg('操作成功', {icon: 6});
                                tableIns.reload();
                                layer.close(index);
                            }
                        });
                    });
                    break;
                case 'needs':
                    win.eqm('物品清单', cont + 'ALL');
                    break;
                case 'reminding':
                    win.eqm('物品清单', cont + 'FINISH');
                    break;
                default:
                    break;
            }
        });

    });
</script>

</body>
</html>